<!--
  v-cloak 斗篷

  这个指令保持在元素上直到关联实例结束编译。
  和 CSS 规则如 [v-cloak] { display: none } 一起用时，
  这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  ----------------------

  注意：
  1. 添加 style (`html` 、 `css`)
  2. v-cloak 后面没有表达式 ( ='...' )
 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     [v-cloak] {
        display: none;
      }
   </style>
 </head>
 <body>

   <div id="app" v-cloak>
     {{message}}
     <br />
     <h2>显示数据了吗？</h2>
   </div>

   <script src="../../js/vue.js"></script>
   <script>

    // 当数据异步处理(网络请求、获取缓存数据)时，我们不希望看到默认值
     setTimeout(() => {
      const app = new Vue({
       el: '#app',
       data: {
         message: '你好 vue !'
       },
     })
     }, 1000);

   </script>
 </body>
 </html>